<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<title>Recepcion de un pedido</title>
</head>
<body>
	<div class="container">
		<h2>Recepcion de un pedido</h2>
		<hr>
		<select name="tipo" id="tipo">
			<option value="0">Tipo de cliente</option>
			<option value="particular">Particular</option>
			<option value="empresa">Empresa</option>
		</select>
		<hr>
		<div id="particular" class="panel panel-default" style="display:none">
			<div class="panel-heading">Particular</div>
			<div class="panel-body">
				<form role="form">
					<div class="form-group">
						<label for="email">Nombre:</label>
						<input type="text" class="form-control" id="nombre" name="nombre">
					</div>
					<div class="form-group">
						<label for="pwd">Apellido:</label>
						<input type="text" class="form-control" id="apellido" name="apellido">
					</div>
					<div class="form-group">
						<label for="pwd">Dni:</label>
						<input type="text" class="form-control" id="dni" name="dni">
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">Cargas</div>
						<div class="panel-body">
							<form role="form">
								<div class="form-group">
									<label for="email">Tipo:</label>
									<input type="text" class="form-control" id="tipo" name="tipo">
								</div>
								<div class="form-group">
									<label for="pwd">Descripcion de la carga:</label>
									<textarea class="form-control" name="descripcionCarga"></textarea>
								</div>
								<div class="form-group">
									<label for="pwd">Peso:</label>
									<input type="text" class="form-control" id="peso" name="peso">
								</div>
								<div class="panel panel-default">
									<div class="panel-heading">Tamaño:</div>
									<div class="panel-body">
										<form role="form">
											<div class="form-group">
												<label for="email">Ancho:</label>
												<input type="text" class="form-control" id="ancho" name="ancho">
											</div>
											<div class="form-group">
												<label for="pwd">Alto:</label>
												<input type="text" class="form-control" id="alto" name="alto">
											</div>
											<div class="form-group">
												<label for="pwd">Profundidad:</label>
												<input type="text" class="form-control" id="profundidad" name="profundidad">
											</div>
											<div class="form-group">
												<label for="pwd">Volumen:</label>
												<input type="text" class="form-control" id="volumen" name="volumen">
											</div>
										</form>
									</div>
								</div>
								<div class="form-group">
									<label for="pwd">Fragilidad:</label>
									<input type="text" class="form-control" id="fragilidad" name="fragilidad">
								</div>
								<div class="form-group">
									<label for="pwd">Apilable:</label>
									<input type="checkbox" class="form-control" id="apilable" name="apilable">
								</div>
								<div id="cantidadApilableDiv" class="form-group">
									<label for="pwd">Cantidad apilable:</label>
									<input type="text" class="form-control" id="cantidadApilable" name="cantidadApilable">
								</div>
								<div class="form-group">
									<label for="pwd">Condiciones:</label>
									<textarea class="form-control" name="condiciones"></textarea>
								</div>
								<div class="form-group">
									<label for="pwd">Tratamiento:</label>
									<textarea class="form-control" name="tratamiento"></textarea>
								</div>
								<div class="panel panel-default">
									<div class="panel-heading">Manifiesto:</div>
									<div class="panel-body">
										<form role="form">
											<div class="form-group">
												<label for="email">Descripcion:</label>
												<textarea class="form-control" name="manifiesto"></textarea>
											</div>
										</form>
									</div>
								</div>
								<div class="form-group">
									<label for="pwd">Indicaciones:</label>
									<textarea class="form-control" name="indicaciones"></textarea>
								</div>
								<div class="panel panel-default">
									<div class="panel-heading">Destino:</div>
									<div class="panel-body">
										<form role="form">
											<div class="form-group">
												<label for="email">Direccion:</label>
												<input type="text" class="form-control" id="direccion" name="direccion">
											</div>
											<div class="form-group">
												<label for="email">Fecha maxima:</label>
												<input type="text" class="form-control" id="fechaMaxima" name="fechaMaxima">
											</div>
											<div class="form-group">
												<label for="email">Coordenadas GPS:</label>
												<input type="text" class="form-control" id="coordenadasGps" name="coordenadasGps">
											</div>
											<div class="panel panel-default">
												<div class="panel-heading">Personas habilitadas</div>
												<div class="panel-body">
													<form role="form">
														<div class="form-group">
															<label for="email">Nombre:</label>
															<input type="text" class="form-control" id="nombrePersonaHabilitada" name="nombrePersonaHabilitada">
														</div>
														<div class="form-group">
															<label for="email">Dni:</label>
															<input type="text" class="form-control" id="dniPersonaHabilitada" name="dniPersonaHabilitada">
														</div>
														<input type="button" value="Agregar">
													</form>
													<hr>
													<div id="productos">
														<ul class="list-group">
															<li class="list-group-item">
																<span class="badge"><a href="#">Borrar</a></span>
																Persona 1
															</li>
															<li class="list-group-item">
																<span class="badge"><a href="#">Borrar</a></span>
																Persona 2
															</li>
														</ul>
													</div>
												</div>
											</div>
										</form>
									</div>
								</div>
							</form>
						</div>
					</div>
					<button type="submit" class="btn btn-danger">Guardar</button>
				</form>
			</div>
		</div>
		<div id="empresa" class="panel panel-default" style="display:none">
			<div class="panel-heading">Empresa</div>
			<div class="panel-body">
				<form role="form">
					<div class="form-group">
						<label for="email">CUIT:</label>
						<input type="text" class="form-control" id="cuit" name="cuit">
					</div>
					<div class="form-group">
						<label for="pwd">Razon social:</label>
						<input type="text" class="form-control" id="razonSocial" name="razonSocial">
					</div>
					<div class="form-group">
						<label for="pwd">Monto minimo autorizacion:</label>
						<input type="text" class="form-control" id="montoMinimo" name="montoMinimo">
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">Cuenta corriente</div>
						<div class="panel-body">
							<form role="form">
								<div class="form-group">
									<label for="email">Fecha de apertura:</label>
									<input type="text" class="form-control" id="fechaCuentaCorriente" name="fechaCuentaCorriente">
								</div>
								<div class="form-group">
									<label for="pwd">Saldo:</label>
									<input type="text" class="form-control" id="saldo" name="saldo">
								</div>
							</form>
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading">Productos autorizados</div>
						<div class="panel-body">
							<form role="form">
								<div class="form-group">
									<label for="email">Nombre:</label>
									<input type="text" class="form-control" id="nombreProducto" name="nombreProducto">
								</div>
								<input type="button" value="Agregar">
							</form>
							<hr>
							<div id="productos">
								<ul class="list-group">
									<li class="list-group-item">
										<span class="badge"><a href="#">Borrar</a></span>
										ID - Producto 1
									</li>
									<li class="list-group-item">
										<span class="badge"><a href="#">Borrar</a></span>
										ID - Producto 2
									</li>
								</ul>
							</div>
						</div>
					</div>
					<button type="submit" class="btn btn-danger">Guardar</button>
				</form>
			</div>
		</div>
	</div>

	<script src="https://code.jquery.com/jquery.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script type="text/javascript">
	$('#dni').on('focusout', function(event) {
		event.preventDefault();
		$.ajax({
			url: '/Validaciones',
			type: 'GET',
			dataType: 'html',
			data: {tipo: $('#tipo').val(), dni: $('#dni').val()},
		})
		.done(function() {
			console.log("success");
		});
	});	

	$('#tipo').on('change', function(event) {
		event.preventDefault();
		if($(this).val() == '0') {
			$('#particular').hide();
			$('#empresa').hide();
		}
		if($(this).val() == 'particular') {
			$('#particular').show();
			$('#empresa').hide();
		}
		if($(this).val() == 'empresa') {
			$('#empresa').show();
			$('#particular').hide();
		}
	});
	</script>
</body>
</html>